<!-- 编辑弹窗 -->
<template>
    <ele-modal  width="70%" :visible="visible" :close-on-click-modal="true" custom-class="ele-dialog-form"
      title="媒体详情" @update:visible="updateVisible" >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  style="margin-top: -10px">
          <div slot="header" class="clearfix">
            <span style="font:bold">媒体信息</span>
        </div>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24">
            <el-form-item label="标题:"  prop="title">{{form.title}}
   
            </el-form-item>
          </el-col>
          <el-col :md="24" :sm="24">
            <el-form-item label="摘要:"  >{{form.abstracts}}
   
            </el-form-item>
          </el-col>
          <el-col :md="24" :sm="24">
            <el-form-item label="媒体图片:"  >
              <img  :src="form.mediaUrl" alt="" style="width:220px;height:180px;">
            </el-form-item>
          </el-col>
          <el-col :md="24" :sm="24">
            <el-form-item label="内容:"   >
             <div v-html="form.content" style="width: 100%;max-height: 200px;overflow-y: auto;overflow-x: hidden;  text-align: left; "></div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :md="24" :sm="24">
            <el-card style="margin-top: 10px">
                <div slot="header" class="clearfix">
                    <span style="font:bold">评论留言</span>
                </div>
                <el-table :data="form.comments" :border="true" style="width: 100%">
                    <el-table-column type="index" width="50" align="center" label="序号" />
                    <el-table-column label="内容">
                      <template slot-scope="{ row }">
                          <span>{{ row.message }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="发布人">
                      <template slot-scope="{ row }">
                          <span>{{ row.CommentRealName }}</span>
                      </template>
                    </el-table-column>
                    <el-table-column label="发布日期">
                      <template slot-scope="{ row }">
                          <span>{{ row.createDate }}</span>
                      </template>
                    </el-table-column>
                </el-table>
            </el-card>
          </el-col>
         
      </el-row>
      </el-card>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
    
    </div>
    </ele-modal>
  </template>
  
  <script>
    import { QueryMediaViewById } from '@/api/customermanager/customermedia';
    export default {
      name: 'MediaDetail',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        //按钮索引
        btnindex:String,
      },
      data() {
        return {
          // 表单数据
          form: {},
          // 表单验证规则
          rules: {},
          comments:[],
          // 提交状态
          loading: false
        };
      },
  
      //初始化数据
      created(){},
      methods: {
      /* 更新visible */
      updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
        },
           //赋值到页面
       setMedia(id){
         QueryMediaViewById(id)
              .then((res) => {
                this.form = res;
          });
        },
      
      },
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data && this.data.id) {
              //赋值this.form
              this.form = {};
              this.setMedia(this.data.id);
  
            } else {
              this.form={};
              this.isUpdate = false;
            }
          } else {
            //移除校验结果并重置字段
            // this.$refs['form'].resetFields();
            //移除校验结果
            this.$refs['form'].clearValidate();
            this.form = {};
          }
        }
      }
    };
  </script>
  
  